import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/base/base_nav_bar.dart';
import 'package:cbec_app/components/base/base_page.dart';
import 'package:cbec_app/components/base/base_chekbox.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/pages/login/binding/login_binding.dart';
import 'package:cbec_app/pages/login/controller/login_ctr.dart';
import 'package:cbec_app/pages/my/controller/statement_ctr.dart';
import 'package:cbec_app/routes/routes.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:country_code_picker/country_code_picker.dart';

import '../../../utils/prevent_double_tap.dart';

///登录页
class LoginPage extends GetView<LoginController> {
  LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        FocusScope.of(context).unfocus();
      },
      child: GetBuilder<LoginController>(
        builder: (controller) {
          return BasePage(
            bodyColor: Colors.white,
            enablePullDown: false,
            enablePullUp: false,
            iconType: IconType.back,
            navType: NavType.common,
            children: [
              // 登录logo
              Container(
                margin: EdgeInsets.only(top: 90.w),
                alignment: Alignment.center,
                child: BaseImage(url: "login_logo.png", width: 140, height: 140),
              ),
              // 这里是主登录框
              mainBox(),
              authBox(),
              buttons(),
              // 用户注册等按钮
              actionBox(context),
              // 其他登录方式
              otherLogin(),
            ],
          );
        },
      ),
    );
  }

  //主盒子
  Widget mainBox() {
    Widget childs;
    switch (controller.status) {
      case 1:
        //本地号码登录
        childs = localPhoneLogin();
        break;
      case 2 || 4:
        //手机号登录或注册
        childs = Container(
          margin: EdgeInsets.fromLTRB(18.w, 20.w, 18.w, 0.w),
          // color: Colors.red,
          child: Column(
            children: [
              // Container(
              //   height: 44.h,
              //   padding: EdgeInsets.only(left: 16.w, right: 16.w),
              //   decoration:
              //       border_radis(Tools.fromHex("#F3F5F7"), radiusValue: 50),
              //   //国家地区
              //   child: Row(
              //     mainAxisAlignment: MainAxisAlignment.spaceBetween,
              //     children: [
              //       Text("国家/地区",
              //           style: TextStyle(
              //               fontSize: 13,
              //               fontWeight: FontWeight.w300,
              //               color: Tools.fromHex("#666666"))),
              //       Row(
              //         mainAxisAlignment: MainAxisAlignment.end,
              //         children: [
              //           Stack(
              //             alignment: Alignment.center,
              //             children: [
              //               Container(
              //                     width: 200.w,
              //                     alignment: Alignment.centerRight,
              //                     child: Text(controller.countryTxt,
              //                         style: TextStyle(
              //                             fontSize: 13,
              //                             fontWeight: FontWeight.w300,
              //                             color: Tools.fromHex("#666666"),
              //                             overflow: TextOverflow.ellipsis)),
              //                   ),
              //               Container(
              //                 width: 200.w,
              //                 color: Colors.transparent,
              //                 child: _countryPick(),
              //               ),
              //             ],
              //           ),
              //           SizedBox(
              //             width: 5.w,
              //           ),
              //           Icon(
              //             Icons.arrow_forward_ios,
              //             size: 14,
              //             color: Tools.fromHex("#666666"),
              //           )
              //         ],
              //       )
              //     ],
              //   ),
              // ),
              //这里是手机号框
              Container(
                height: 44.h,
                margin: EdgeInsets.only(top: 20.w),
                padding: EdgeInsets.only(top: 12.w, left: 16.w, right: 16.w),
                decoration: border_radis(Tools.fromHex("#F3F5F7"), radiusValue: 50),
                child: TextFormField(
                  keyboardType: TextInputType.number,
                  maxLength: 11,
                  enableSuggestions: false,
                  onChanged: (value) {
                    controller.onInputPhone(value);
                  },
                  decoration: descript("请输入手机号"),
                ),
              )
            ],
          ),
        );
        break;
      case 3:

        ///账号密码登录
        childs = Container(
          margin: EdgeInsets.fromLTRB(18.w, 20.w, 18.w, 0.w),
          // color: Colors.red,
          child: Column(
            children: [
              //手机号输入框
              Container(
                height: 44.h,
                // margin: EdgeInsets.only(top: 20.w),
                padding: EdgeInsets.only(top: 12.w, left: 16.w, right: 16.w),
                decoration: border_radis(Tools.fromHex("#F3F5F7"), radiusValue: 50),
                child: TextFormField(
                  maxLength: 11,
                  onChanged: controller.onInputPhone,
                  decoration: descript("请输入手机号"),
                ),
              ),
              //密码输入框
              Container(
                  height: 44.h,
                  margin: EdgeInsets.only(top: 20.w),
                  padding: EdgeInsets.only(left: 16.w, right: 16.w),
                  decoration: border_radis(Tools.fromHex("#F3F5F7"), radiusValue: 50),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      SizedBox(
                        width: 200.w,
                        child: TextFormField(
                          onChanged: controller.onInputPassword,
                          decoration: descript("请输入密码"),
                          obscureText: controller.hidePassword,
                        ),
                      ),
                      BaseInteractive(onClick: () => {controller.showHidePassword()}, childWidget: BaseImage(url: controller.passWordHideShowPic, width: 16, height: 16))
                    ],
                  ))
            ],
          ),
        );
        break;
      case 4:

        ///注册
        childs = Container();
        break;
      default:
        //默认
        childs = Container();
    }
    return childs;
  }

  ///本机器号码登录
  Widget localPhoneLogin() {
    return SizedBox(
      child: Column(
        children: [
          SizedBox(
            height: 10.h,
          ),
          Text(controller.encryptPhone, style: const TextStyle(fontSize: 30, fontWeight: FontWeight.w700)),
          SizedBox(
            height: 10.h,
          ),
          Text("中国移动为您提供本机号码认证服务", style: TextStyle(fontSize: 10, fontWeight: FontWeight.w500, color: Tools.fromHex("#999999")))
        ],
      ),
    );
  }

  //同意协议组件
  Widget authBox() {
    return Container(
      margin: EdgeInsets.only(left: 20, top: 30.w, bottom: 24.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          BaseCheckBox(
            value: controller.isAgree,
            onChange: (selected) {
              controller.isAgree = selected;
            },
          ),
          SizedBox(width: 5.w),
          SizedBox(
              width: 300.w,
              child: RichText(
                text: TextSpan(
                  style: TextStyle(fontSize: 12.0, color: Tools.fromHex("#999999"), fontWeight: FontWeight.w300),
                  children: [
                    const TextSpan(text: '请先阅读并同意'),
                    TextSpan(
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          Get.toNamed(Routes.statement, arguments: RichTextLinkType.privacyPolicy);
                        },
                      text: '《用户隐私协议》',
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.blue,
                      ),
                    ),
                    const TextSpan(text: '和'),
                    TextSpan(
                      text: '《用户服务协议》',
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          Get.toNamed(Routes.statement, arguments: RichTextLinkType.serviceTerm);
                        },
                      style: const TextStyle(
                        fontWeight: FontWeight.bold,
                        color: Colors.blue,
                      ),
                    ),
                  ],
                ),
              ))
        ],
      ),
    );
  }

  /**
       * 按钮
       */
  Widget buttons() => Container(
        width: double.infinity,
        color: Colors.white,
        height: 44.w,
        margin: EdgeInsets.all(18.w),
        child: ElevatedButton(
            style: ButtonStyle(
              backgroundColor: WidgetStateProperty.all(controller.buttonColor),
            ),
            onPressed: () {
              controller.submit();
            },
            //自带的按钮有阴影，先暂时用到
            child: Text(
              controller.btnTxt,
              style: const TextStyle(fontSize: 14.0, fontWeight: FontWeight.w500, color: Colors.white),
            )),
      );

  final TextStyle actionTxt = TextStyle(fontSize: 11, fontWeight: FontWeight.w300, color: Tools.fromHex("#666666"));

  ///用户注册等按钮
  Widget actionBox(BuildContext context) {
    return Center(
      child: Container(
        // color: Colors.red,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            BaseInteractive(
              onClick: () => {controller.checkStatus(4)},
              childWidget: Container(margin: EdgeInsets.only(right: 30.w), child: Text("新用户注册", style: actionTxt)),
            ),
            BaseInteractive(
              onClick: () => {controller.checkStatus(3)},
              childWidget: Container(
                  padding: EdgeInsets.fromLTRB(30.w, 0, 30.w, 0),
                  decoration: const BoxDecoration(
                    border: Border(
                      left: BorderSide(
                        color: Colors.grey,
                        width: 1.0,
                      ),
                      right: BorderSide(
                        color: Colors.grey,
                        width: 1.0,
                      ),
                    ),
                  ),
                  child: Text("账号密码登录", style: actionTxt)),
            ),
            BaseInteractive(
              onClick: () => {
                showModalBottomSheet(
                  backgroundColor: Colors.transparent,
                  context: context,
                  builder: (BuildContext context) {
                    return Container(
                      padding: EdgeInsets.only(left: 8.w, right: 8.w),
                      height: 180.h,
                      child: Column(
                        children: <Widget>[
                          BaseInteractive(
                              onClick: () => {controller.checkStatus(2), Get.back()},
                              childWidget: Container(
                                  decoration: const BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(20.0),
                                        topRight: Radius.circular(20.0),
                                      )),
                                  alignment: Alignment.center,
                                  width: double.infinity,
                                  height: 50.h,
                                  child: Text("手机验证码登录", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Tools.fromHex("#4D87FF"))))),
                          BaseInteractive(
                              onClick: () => {controller.checkStatus(5), Get.toNamed(Routes.fixPassword)},
                              childWidget: Container(
                                  decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: const BorderRadius.only(
                                      bottomLeft: Radius.circular(20.0),
                                      bottomRight: Radius.circular(20.0),
                                    ),
                                    border: Border(
                                      top: BorderSide(
                                        color: Tools.fromHex("#D7D7D7"),
                                        width: 1.0,
                                      ),
                                    ),
                                  ),
                                  alignment: Alignment.center,
                                  width: double.infinity,
                                  height: 50.h,
                                  child: Text("修改密码登录", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Tools.fromHex("#4D87FF"))))),
                          BaseInteractive(onClick: () => {Get.back()}, childWidget: Container(decoration: border_radis(Colors.white, radiusValue: 20), margin: EdgeInsets.only(top: 10.w), alignment: Alignment.center, width: double.infinity, height: 50.h, child: Text("取消", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Tools.fromHex("#4D87FF"))))),
                        ],
                      ),
                    );
                  },
                )
              },
              childWidget: Container(padding: EdgeInsets.only(left: 30.w), child: Text("无法登录", style: actionTxt)),
            ),
          ],
        ),
      ),
    );
  }

  ///其他登录方式
  Widget otherLogin() {
    return Container(
      margin: EdgeInsets.only(top: 40.w),
      child: Column(
        children: [
          Text(
            "其他登录方式",
            style: TextStyle(fontWeight: FontWeight.w400, fontSize: 10, color: Tools.fromHex("#999999")),
          ),
          Container(
            margin: EdgeInsets.only(top: 20.w),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                //这里是三个按钮
                // BaseInteractive(
                //   onClick: () => {controller.checkStatus(1)},
                //   childWidget:
                //       BaseImage(url: "login_apple.png", width: 28, height: 28),
                // ),
                // SizedBox(
                //   width: 40.w,
                // ),
                BaseInteractive(
                  onClick: () {
                    if (PreventDoubleTap().onDoubleTap()) {
                      controller.wechatAuth();
                    }
                  },
                  childWidget: BaseImage(url: "login_wechat.png", width: 28, height: 28),
                ),
                SizedBox(
                  width: 40.w,
                ),
                BaseInteractive(
                  //手机验证码登录
                  onClick: () => {controller.checkStatus(2)},
                  childWidget: BaseImage(url: "login_phone.png", width: 28, height: 28),
                ),
              ],
            ),
          )
        ],
      ),
    );
  }

  Widget _countryPick() => CountryCodePicker(
        textStyle: const TextStyle(fontSize: 23, fontWeight: FontWeight.w300, color: Colors.transparent, overflow: TextOverflow.clip),
        onChanged: (CountryCode countryCode) {
          controller.changeCountry("${countryCode.name}(${countryCode.dialCode})");
        },
        hideMainText: false,
        padding: EdgeInsets.zero,
        showFlagMain: false,
        showFlag: true,
        initialSelection: '+86',
        favorite: const ['+86'],
        // hideSearch: false,

        showCountryOnly: false,
        showOnlyCountryWhenClosed: true,
        alignLeft: false,
      );

  LoginBinding loginBinding = LoginBinding();
}
